<!-- 新闻页面 -->
<template>
  <div class="Journalism">
    <!-- 头部 吸顶 -->
    <van-sticky>
      <van-nav-bar title="新闻">
        <template #left>
          <van-icon name="arrow-left" color="#fff" @click="goBack">返回</van-icon>
        </template>
      </van-nav-bar>
    </van-sticky>

    <!--新闻分类列表 吸顶 -->
    <van-sticky :offset-top="46">
      <van-tabs v-model="active" title-active-color="#ee0a24" background="#FFFAFA">
        <van-tab :title="item" v-for="(item, index) in title" :key="index" ></van-tab>
      </van-tabs>
    </van-sticky>

    <!-- 加载动画 -->
    <xrzp-Loading v-if="!list"></xrzp-Loading>
     <!-- 新闻列表 -->
    <van-list v-model="loading" finished-text="没有更多了" @load="loadMore" :finished="finished" v-if="list">
      <van-cell v-for="(item, index) in list" :key="index">
        <router-link :to="`/journalism/NewsDetail/${index}`">
          <div class="box">
            <div class="container">
              <div class="title">
                {{ item.title }}
              </div>
              <div class="text">{{ item.src }} {{ item.time }}</div>
            </div>
            <div class="img">
              <img :src="item.pic" />
            </div>
          </div>
        </router-link>
      </van-cell>
      <xrzp-Istop></xrzp-Istop>
    </van-list>  
  </div>
</template>

<script>
import { axios_channel,axios_get } from "@/api/data_axios";
export default {
  data() {
    return {
      title: "",       // 新闻类别
      active: 0,       // 新闻选中项
      start: 0,        // 起始条数
      loading: false,  // 加载状态
      finished: false, // 完成状态
      list: "",        // 新闻列表数据
      appkey:"b0e7418fe9bef46dcb47a53374ffbef1"
    };
  },
  watch: {
    active: {
      handler(newval) {
        this.start = 0;
        window.scrollTo(0, 0);
        this.loadAticle(this.title[newval]);
      },
      immediate: false //开启首次监听赋值（不开启首次监听不到）
    }
  },
  mounted() {
    this.loadCategory();
    this.loadAticle("头条");
  },
  methods: {
    // 获取新闻类别方法
    loadCategory() {
      let data = {
        appkey:this.appkey
      }
      axios_channel(data).then(res=>{
        this.title = res.result.result;
      })
    },
    // 获取新闻列表方法
    loadAticle(channel) {
      let data={
        channel,
        start:0,
        num:20,
        appkey:this.appkey
      }
      axios_get(data).then(res=>{
        this.list = res.result.result.list;
        //往vuex里传值
        this.$store.commit("new", this.list);
      })
    },
    // 触底加载
    loadMore() {
      this.start += 20;
      this.loading = true;
      let data = {
        channel:this.title[this.active],
        start:this.start,
        num:20,
        appkey:this.appkey
      }
      // 发送http请求,获取当前类别下的下一页数据,更新列表
      axios_get(data).then(res=>{
        if ( res.result.msg == "没有信息") {
          // 数据全部加载完成
          this.finished = true;
        } else {
          this.list = [...this.list,...res.result.result.list];
          this.$store.commit("new", this.list);
          // 加载状态结束
          this.loading = false;
        }
      })
    },
    // 返回
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped lang="scss">
.Journalism {
  .van-nav-bar {
    background-color: $base-color;
    ::v-deep .van-nav-bar__title{
      font-weight: bold;
    }
    .van-icon{
      font-weight: bold;
    }
  }
  .van-nav-bar__title,
  .van-nav-bar__left a,
  .van-nav-bar__right a {
    color: white;
  }
  .van-list {
    .van-cell {
      background-color: #fafafa;
      .box {
        display: flex;
        .container {
          width: 60%;
        }
      }
      .title {
        font-size: 1rem;
        color: black;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .text {
        color: rgb(114, 114, 114);
        font-size: 0.8rem;
      }
      .img {
        width: 10rem;
        height: 5rem;
        overflow: hidden;
        img {
          margin-left: 1rem;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
